<template>
	<view class="classify" @scroll=leftScroll>
		<!-- 搜索框 -->
		<view class="search">
			<view class="search-content" @click="goToSearch">
				<!-- 在uni-app官网找的图标 -->
				<uni-icons type="search" size="26" color="#9F9F9F"></uni-icons>
				<text>搜索店内商品</text>
			</view>
		</view>
		<!-- 分类部分 -->
		<view class="cate-container">
			<view class="cate-left" >
				<view :class="['cate-item', activeIndex == index ? 'active' : '']" v-for="(item, index) in cateList"
					:key="index" @click="changeActive(index)">{{ item.classifyName }}</view>
			</view>
			<!-- <image src="../../../../static/shop/08e30652b43f811bc7ed794a4c62939.png" mode=""></image> -->
			<view class="cate-right">
				<view class="">
					<!-- <image src="" mode=""></image> -->
				</view>
				<view class="cate-content" v-for="(goodItem, goodIndex) in goodList" :key="goodIndex">
					<view class="">
						<image :src="goodItem.picUrl" mode=""></image>
					</view>
					<view class="right-content">
						<view class="cate-text">{{ goodItem.text }}</view>
						<view class="cate-text">
							<span>￥</span>{{ goodItem.price }} /{{ goodItem.kind }}
						</view>
					</view>
					<!-- <image src="../../../../static/shop/08e30652b43f811bc7ed794a4c62939.png" mode=""></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cateListOptions,
		resgoodList
	} from './jsonList.js';
	export default {
		data() {
			return {
				// 初始化的分类列表
				cateList: [],
				// 当前点击项的索引号
				activeIndex: 0,
				// 分类下的商品信息
				goodList: []
			};
		},
		created() {
			this.getcateList()
			this.cateList = cateListOptions
		},
		mounted() {
			console.log('mounted', );
		},
		watch:{
			activeIndex:function(newval,oldval){
				console.log(newval,oldval);
				if(newval != oldval){
					// this.changeActive()
					this.goodList = cateListOptions[newval].children
				}
			}
		},
		methods: {
			leftScroll(item){
				console.log('滚动',item);	
			},
			async getcateList() {
				// cateListOptions

				// this.goodList = resgoodList.classify[0].children
				this.goodList = cateListOptions[0].children
				console.log('方法李1', cateListOptions);
				// console.log('方法李',resgoodList.classify);
				this.changeActive(0)
				// console.log(this.goodList);
				// const res=await uni.$http.get('/classify')
				// console.log(res)
				// const {data:{classify,code}}=res
				// if(code!=200){
				// 	return uni.showToast({
				// 		title:'加载数据失败',
				// 		duration:1000,
				// 		icon:'none'
				// 	})
				// }else{
				// 	this.cateList=classify
				// 	// 获取第一个分类下的商品
				// 	this.goodList=classify[0].children
				// }
			},
			//更改点击项的索引号
			changeActive(i) { //赋值之后走监听属性，避免点击重复时

				this.activeIndex = i
				console.log('i', i);
				// 已经获取到索引号
				console.log('cateList2', this.cateList);
				console.log(resgoodList);
				// console.log('cateList1',cateList);
			},
			//点击搜索框跳转到搜索页面
			goToSearch: function() {
				uni.navigateTo({
					url: '/subpkg/goods-search/goods-search'
				})
			}
		},
		onLoad() {
			console.log(11);
		},
		onShow() {
			console.log('onshow');
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.classify {
		background-color: #fff;

		.search {
			width: 100%;
			height: 134rpx;
			display: flex;
			align-items: center;

			.search-content {
				width: 90%;
				height: 80rpx;
				margin: auto;
				border: 1px solid #E6E6E6;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #9F9F9F;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.cate-container {
			width: 100%;
			display: flex;

			.cate-left {
				width: 200rpx;
				background-color: #F6F6F6;

				.cate-item {
					width: 100%;
					height: 120rpx;
					line-height: 100rpx;
					padding-left: 25rpx;
					font-size: 14px;
					box-sizing: border-box;
				}

				.active {
					background-color: #FFFFFF;
					position: relative;
					padding-left: 25rpx;
					box-sizing: border-box;
					color: #FAAD14;
					font-weight: 700;

					&::before {
						content: '';
						display: block;
						width: 10rpx;
						border-radius: 6rpx;
						height: 40rpx;
						background-color: #FAAD14;
						position: absolute;
						left: 0rpx;
						top: 30rpx;
					}
				}
			}

			.cate-right {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				height: 300rpx;

				.cate-content {
					width: 100%;
					height: 200rpx;
					// text-align: center;
					border: 1px solid rgba(100, 100, 100, .1);
					display: flex;
					flex-wrap: nowrap;
					justify-content: left;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-left: 20rpx;
					}

					.right-content {
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;

						:nth-child(1) {
							margin-top: 20px;
						}
					}

					.cate-text {
						font-size: 34rpx;
						width: 300rpx;
						height: 100rpx;
						margin: auto;
					}
				}
			}
		}
	}
</style>
